/**
 * Created by JLB1 on 2017/2/7.
 */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Clipboard from 'clipboard';
import AJAX from '../../lib/ajax';
import Tools from '../../lib/tools';
import wx from 'wx';
import Dialog from '../MyPackage/components/Dialog';
import Toast from '../MyPackage/components/Toast';
import { addErrorListener } from '../../lib/handleError';

require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./UnmannedCarDetail.less');

const statusName = ['待送达', '已完成', '已取消'];

class UnmannedCarDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            order_id: Tools.getParams().order_id,
            billList: [],
            orderDetail: {},
            cancelReason: 1,
        };
    }

    componentWillMount() {
        addErrorListener()();

        // Tools.createCookie('wx_type', Tools.getParams().wx_type);

        const id = Tools.getParams().order_id;

        //获取详情
        AJAX.request('unmanned_detail', { id: id, }, data => {
            if (data.code === 0) {
                const list = data.body.bills;

                this.setState({
                    orderDetail: data.body,
                    billList: list,
                });
            } else if (data.code === 15101) { // 订单不存在
                this.setState({
                    isLoading: 3,
                });
            }
        });
    }

    componentDidMount() {
        new Clipboard('.right-btn');
        new Clipboard('.icon-copy');
        AJAX.appendBaiduAnalysis();
    }

    showDialog() {
        Dialog.confirm({
            title: '取消订单',
            htmlContent: (<div className="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
                <div className="weui-cell__hd">
                    <span className="weui-label">取消原因</span>
                </div>
                <div className="weui-cell__bd">
                    <select className="weui-select" onChange={(e) => {
                        this.setState({ cancelReason: e.target.value });
                    }}>
                        <option value="1">同学代取</option>
                        <option value="2">路过自取</option>
                        <option value="3">下错订单</option>
                    </select>
                </div>
            </div>),
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOK: () => {
                AJAX.request('unmanned_cancel', { id: Tools.getParams().order_id, reason: this.state.cancelReason }, data => {
                    if (data.code === 0) {
                        window.location.reload();
                    } else if (data.code === 15101) { // 订单不存在
                        this.setState({
                            isLoading: 3,
                        });
                    }
                });
            },
        })
    }

    render() {
        const {
            orderDetail,
            billList,
            isLoading,
        } = this.state;

        if (isLoading === 1) return null;

        const dataList = [
            { label: '近邻宝快递', value: billList },
            { label: '送达地址', value: [orderDetail.stationName, orderDetail.userPhone] },
            { label: '配送时间', value: orderDetail.deliverTime },
            { label: '联系人', value: [orderDetail.contactName, orderDetail.contactPhone] },
            { label: '订单号', value: orderDetail.orderId, },
            { label: '备注信息', value: orderDetail.comment },
            { label: '下单时间', value: orderDetail.createTime },
            { label: '支付方式', value: '微信支付' },
            { label: '付款时间', value: orderDetail.payTime },
            { label: '实付费用', value: `${orderDetail.money / 100}元` },
            { label: '订单状态', value: statusName[orderDetail.status - 1] },
        ];

        let pickupDetail = (
            <div>
                <div className="expressDetailBox">
                    {orderDetail.status !== 3 && <div>
                        <div className="lux-c999">无人车取件码:</div>
                        {orderDetail.vehicleStatus === 0 ? <div style={{ textAlign: 'center', fontSize: 18, }}>订单还未存放至无人车</div> : <div style={{ textAlign: 'center', fontSize: 28, fontWeight: 'bold' }}>{orderDetail.openCode}</div>}

                    </div>}
                    {
                        dataList.map((item, index) => (
                            <div>
                                <div className="lux-d-f lux-ai-c lux-pt10 lux-pb10" style={{ borderBottom: index !== dataList.length - 1 ? '1px solid rgba(238,238,238,1)' : '', alignItems: item.label === '近邻宝快递' ? 'flex-start' : 'center' }}>
                                    <div className="lux-c999 lux-fz14 lux-fw-500 lux-miw80">{item.label}:</div>
                                    {
                                        item.label === '近邻宝快递' && (
                                            <div className="lux-flex-1 lux-d-f lux-ai-c" style={{ maxHeight: 250, overflowY: 'auto', alignItems: 'flex-start', flexDirection: 'column' }}>
                                                {item.value.map(bill => (
                                                    <div style={{ marginBottom: 15 }}>
                                                        <div className="lux-c333 lux-fz14 lux-fw-500">{bill.address}</div>
                                                        <div className="lux-c666 lux-fz14 lux-fw-500" style={{ fontSize: 14 }}>{bill.expressName}&nbsp;&nbsp;&nbsp;&nbsp;{bill.expNo}</div>
                                                    </div>
                                                ))}
                                            </div>
                                        )
                                    }
                                    {
                                        item.label === '送达地址' && (
                                            <div className="lux-flex-1 lux-d-f lux-ai-c" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
                                                <div className="lux-c333 lux-fz14 lux-fw-500">{item.value[0]}</div>
                                                <div className="lux-c333 lux-fz14 lux-fw-500">{item.value[1]}</div>
                                            </div>
                                        )
                                    }
                                    {
                                        item.label === '订单号' && (
                                            <div className="lux-flex-1 lux-d-f lux-ai-c">
                                                <div className="lux-c333 lux-fz14 lux-fw-500">{item.value}</div>
                                                <img
                                                    className="icon-copy lux-ml20"
                                                    src="https://wechat.jinlb.cn/assets/images/icon-copy.png"
                                                    data-clipboard-text={item.value}
                                                    onClick={() => Toast.success({ content: '复制成功' })}
                                                />
                                            </div>
                                        )
                                    }
                                    {
                                        item.label === '联系人' && (
                                            <div className="lux-fz14 lux-fw-500">{item.value[0]} <a className="lux-cffa600" href={`tel:${item.phone}`}>{item.value[1]}</a></div>
                                        )
                                    }

                                    {
                                        !['近邻宝快递', '送达地址', '订单号', '联系人'].includes(item.label) && (
                                            <div className="lux-c333 lux-fz14 lux-fw-500">{item.value}</div>
                                        )
                                    }
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div >
        );

        return (
            <div>
                <div className="lux-pt10 lux-pl10 lux-pr10 lux-pb70">
                    {pickupDetail}
                </div>

                {(orderDetail.status === 1 && orderDetail.vehicleStatus === 0) && <div className="footer-box">
                    <div className="footer-btn-box">
                        <div className="contact" onClick={() => {
                            this.showDialog();
                        }}>
                            取消订单
                        </div>
                    </div>
                </div>}


            </div>
        );
    }
}

ReactDOM.render(<UnmannedCarDetail />, document.getElementById('app'));

if (module.hot) {
    module.hot.accept();
}